<template>
  <div class="world-map flex-row-vc">
    <div class="world-container flex-row">
      <div class="left-box flex-row-vc">
        <div class="map-count-to">
          <div class="count-to-title">链上地理标志数量</div>
          <div class="count-to-box">
            <countTo ref="countTo" :start-val="startVal" :end-val="endVal" :duration="duration" @mountedCallback="mountedCallback" />
          </div>
        </div>
        <div class="node-list">
          <p class="node-list-title">节点列表</p>
          <div class="node-list-box">
            <vueSeamless ref="seamless" :data="analysisData" :class-option="nodeListOption" class="seamless-warp">
              <div v-for="(item,index) in analysisData" :key="index" class="scorll-item">
                <p class="item-node-title">
                  <img src="img/icon_blue.png" alt=""/>
                  <span>{{ item.name }}</span>
                </p>
                <div class="item-node-content">
                  <div class="content-ip">
                    <i>{{ item.ip }}</i>
                    <br/>
                    <span>IP地址</span>
                  </div>
                  <div class="content-desc">
                    <p>{{ item.des }}</p>
                    <span>描述</span>
                  </div>
                  </div >
                </div>
            </vueSeamless>
          </div>
        </div>
        <div class="line-section">
          <TrendLine :titletext="'区块链容器（GB）'" :type="2" :echartsdata="qkl_data" />
        </div>
      </div>
      <div class="map-box flex-row">
        <!-- <echartmap-china :analysis-data="analysisData" /> -->
        <echartmap-world :analysis-data="analysisData" />
      </div>
      <div class="right-box">
        <div class="node-list">
          <p class="node-list-title">链上信息记录</p>
          <div class="node-list-box">
            <vueSeamless ref="seamless" :data="msgList" :class-option="msgListOption" class="seamless-warp">
              <div v-for="(item,index) in msgList" :key="index" class="scorll-item">
                <div class="item-left-box">
                  <img src="img/icon_msg.png" alt=""/>
                </div>
                <div class="item-right-box">
                  <p class="item-node-title"><i>{{ item.title }}</i></p>
                  <p class="item-time"><span>生成时间：</span><span>{{ item.createTime }}</span></p>
                  <p class="item-hash"><span>哈希值：</span><span>{{ item.hash }}</span></p>
                </div>
              </div>
            </vueSeamless>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
import TrendLine from "@/components/TrendLine";
import vueSeamless from 'vue-seamless-scroll'
import countTo from 'vue-count-to'
import echartmapWorld from 'components/echarts/EchartMapWorld'
// import echartmapChina from 'components/echarts/EchartMapChina'
export default {
  name: 'WorldMap',
  components: {
    countTo,
    vueSeamless,
    echartmapWorld,
    // echartmapChina,
    TrendLine
  },
  data() {
    return {
      value: [],
      options: [],
      addNumber: 0,
      endVal: 0,
      startVal: 0,
      duration: 3000,
      analysisData: [],
      nodeList: [],
      qkl_data:{
        "2021": 976,
        "2022": 1375,
        "2023": 2208,
        "2024": 2758,
        "2025": 3684
      },
      msgList: [
        { title: 'Block 8', createTime: '2021/04/10', hash: 'adsfssdadjsjfljdslfjsdjsd' },
        { title: 'Block 7', createTime: '2021/04/10', hash: 'adsfssdadjsjfljdslfjsdjsd' },
        { title: 'Block 6', createTime: '2021/04/10', hash: 'adsfssdadjsjfljdslfjsdjsd' },
        { title: 'Block 5', createTime: '2021/04/10', hash: 'adsfssdadjsjfljdslfjsdjsd' },
        { title: 'Block 4', createTime: '2021/04/10', hash: 'adsfssdadjsjfljdslfjsdjsd' },
        { title: 'Block 3', createTime: '2021/04/10', hash: 'adsfssdadjsjfljdslfjsdjsd' },
        { title: 'Block 2', createTime: '2021/04/10', hash: 'adsfssdadjsjfljdslfjsdjsd' },
        { title: 'Block 1', createTime: '2021/04/10', hash: 'adsfssdadjsjfljdslfjsdjsd' }
      ],
      msgNum:'',
    }
  },
  computed: {
    // 公告滚动自定义
    nodeListOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: this.nodeList.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    },
    msgListOption() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: this.msgList.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 110, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 3000
      }
    }
  },
  watch: {

  },
  created() {
    document.title = '全球地理标志大数据'
    this.nodeList = require('@static/全球.json').node_list
    this.getGlobalMapData();
    this.getBlockData();
  },
  mounted() {
  },
  methods: {
    getBlockData(){
      this.msgList=[];
      for(let i = 0; i<8;i++){
          this.msgList.push(this.createBlock());
      }
      const that = this;
      setInterval(function(){
        that.msgList.push(that.createBlock())
      },3000)
    },
    createBlock(){
      let msg = { title: 'Block 8', createTime: '2021/04/10', hash: 'adsfssdadjsjfljdslfjsdjsd' }
      let num = this.msgNum;
      if(this.msgNum==0){
        for(let i =0;i<3;i++){
          num+=Math.floor(Math.random()*10);
        }
      }
      let h = '';
      for(let i = 0;i<16;i++){
        h+=Math.floor(Math.random()*16).toString(16);
      }
      h+= '...'
      
      msg.title=`Block ${num}`;
      msg.createTime=this.utils.dateFormat(new Date(), 'YYYY/MM/DD hh:mm:ss');
      msg.hash = h;
      this.msgNum =parseInt(num)+1;
      return msg;
    },
    level1Click(item) {
      if (item.children.length) {
        this.showLevel2List = !this.showLevel2List
        return
      }
      this.selectValue = item.label
    },
    level2Click(child) {
      this.level2HoverValue = child.label
      this.selectValue = child.label
      this.showLevel1List = false
      this.showLevel2List = false
    },
    hoverSelectItem(item) {
      // debugger
      if (item.level === 1) {
        this.hoverValue = item.label
        this.showLevel2List = true
      } else {
        this.level2HoverValue = item.label
      }
    },
    handleChange(value) {
      console.log(value)
    },
    mountedCallback() {
      // setInterval(() => {
      this.startVal = this.endVal
      //   this.endVal += Math.floor(Math.random() * (100 - 1)) + 1
      // }, this.duration + 1000)
    },
    getGlobalMapData() {
      const mapData = require('@static/world.json')
      this.analysisData = mapData.node_list;
      this.qkl_data = mapData.qkl_data;
      this.endVal = mapData.count;
    }
  }
}
</script>
<style lang="less" scoped>
  .world-map {
    position: relative;
    width: 100%;
    height: calc(100% - 110px);
    padding: 0 40px;
    overflow: hidden;
    .world-container {
      flex: 1 1 auto;
      height: 100%;
      text-align: left;
      .left-box {
        padding-top: 130px;
        flex: 0 0 366px;
        height: 100%;
        overflow: hidden;
      }
      .right-box {
        flex: 0 0 366px;
        height: 100%;
        overflow: hidden;
      }
      .left-box, .right-box {
        color: #fff;
        .map-count-to {
          position: relative;
          width: 100%;
          text-align: left;
          margin-bottom: 40px;
          flex: 0 0 auto;
          .count-to-title{
            font-size:22px;
            font-weight:700;
          }
          .map-count-to {
            font-size: 14px;
          }
          .count-to-box {
            font-size: 40px;
            text-shadow: 0 0 16px rgba(0,212,255,0.65);
            display: inline-block;
            font-weight:700;
          }
        }
        .node-list {
          flex: 1 1 auto;
          height: 300px;
          .node-list-box {
            padding-top: 10px;
            overflow: hidden;
            height: calc(100% - 50px);
          }
          .node-list-title {
            padding-bottom: 20px;
            font-size:22px;
            font-weight:700;
          }
          .scorll-item {
            height: 100px;
            border-radius: 8px;
            width: 100%;
            background: rgba(255,255,255,0.07);
            border: 1px solid rgba(255,255,255,0.08);
            margin-bottom: 10px;
            .item-node-title {
              img {
                vertical-align: bottom;
                height: 38px;
                position: relative;
                top: 4px;
              }
              span {
                display: inline-block;
                height: 38px;
                line-height: 38px;
              }
            }
            .item-node-content {
              display: flex;
              font-size: 14px;
              padding: 5px 0 0 10px;
              .content-desc {
                margin-left: 40px;
              }
              span {
                font-size: 12px;
                opacity: 0.6;
              }
            }
          }
        }
        .line-section {
          flex: 0 0 300px;
          padding-top: 40px;
        }
      }
      .map-box {
        padding: 40px;
        flex: 1;
        align-items: center;
        // height: 100%;
      }
      .right-box {
        min-width: 360px;
        color: #fff;
        text-align: left;
        padding-top: 10px;
        .node-list {
          height: 100%;
          .node-list-box {
              padding-top: 10px;
              overflow: hidden;
              height: calc(100% - 50px);
            .scorll-item {
              // height: 89px;
              border-radius: 4px;
              width: 100%;
              background: rgba(255,255,255,0.07);
              border: 1px solid rgba(255,255,255,0.08);
              margin-bottom: 10px;
              padding-right: 10px;
              display: flex;
              .item-left-box {
                width: 35px;
                margin: 10px 16px 0 10px;
                img {
                  width: 100%;
                }
              }
              .item-right-box {
                line-height: 22px;
                .item-node-title {
                  font-size: 18px;
                  padding-top: 12px;
                }
                .item-time, .item-hash {
                  font-size: 12px;
                  opacity: 0.6;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
